<script setup lang="ts">
import CustomMessage from '@/components/CustomMessage/index.vue';
import { ref } from 'vue';

const message = ref();

// 系统设置数据
const settings = ref({
  theme: 'auto', // auto/light/dark
  notification: true,
  fontSize: 16,
  wifiOnly: false,
  cacheSize: '256MB',
  language: 'zh-CN',
});

// 主题选项
const themeOptions = [
  { value: 'auto', label: '跟随系统' },
  { value: 'light', label: '浅色模式' },
  { value: 'dark', label: '深色模式' },
];

// 语言选项
const languageOptions = [
  { value: 'zh-CN', label: '简体中文' },
  { value: 'en', label: 'English' },
  { value: 'ja', label: '日本語' },
];

// 清除缓存
function clearCache() {
  uni.showLoading({ title: '清理中...' });
  setTimeout(() => {
    settings.value.cacheSize = '0MB';
    uni.hideLoading();
    message.value.show({
      type: 'success',
      title: '缓存已清除',
      duration: 1500,
    });
  }, 800);
}

// 退出登录
function logout() {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出当前账号吗？',
    success(res) {
      if (res.confirm) {
        uni.reLaunch({ url: '/pages/login/index' });
      }
    },
  });
}
</script>

<template>
  <view class="min-h-screen bg-gray-50 pb-[env(safe-area-inset-bottom)]">
    <!-- 顶部标题 -->
    <view class="bg-gradient-to-r from-blue-600 to-cyan-500 px-6 py-4 rounded-b-lg shadow">
      <text class="text-2xl font-bold text-white">
        系统设置
      </text>
      <view class="text-sm text-white/80 mt-1">
        个性化你的阅读体验
      </view>
    </view>

    <!-- 设置列表 -->
    <scroll-view scroll-y class="h-[calc(100vh-7.5rem)] px-4 py-3">
      <!-- 外观设置 -->
      <view class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
        <view class="px-4 py-3 border-b border-gray-100">
          <text class="font-medium text-gray-800">
            外观设置
          </text>
        </view>

        <view class="divide-y divide-gray-100">
          <!-- 主题选择 -->
          <view class="px-4 py-3 flex justify-between items-center">
            <view>
              <text class="block text-gray-800">
                主题模式
              </text>
              <text class="block text-xs text-gray-400 mt-1">
                根据喜好选择界面风格
              </text>
            </view>
            <picker
              :value="settings.theme"
              :range="themeOptions"
              range-key="label"
              @change="(e) => settings.theme = themeOptions[e.detail.value].value"
            >
              <view class="text-gray-600 flex items-center">
                {{ themeOptions.find(t => t.value === settings.theme)?.label }}
                <uni-icons type="right" size="16" class="text-gray-400 ml-1" />
              </view>
            </picker>
          </view>

          <!-- 字体大小 -->
          <view class="px-4 py-3">
            <view class="flex justify-between mb-2">
              <text class="text-gray-800">
                正文字号
              </text>
              <text class="text-blue-500 text-sm">
                {{ settings.fontSize }}px
              </text>
            </view>
            <slider
              :value="settings.fontSize"
              min="12"
              max="22"
              step="2"
              active-color="#3b82f6"
              @change="(e) => settings.fontSize = e.detail.value"
            />
          </view>
        </view>
      </view>

      <!-- 功能设置 -->
      <view class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
        <view class="px-4 py-3 border-b border-gray-100">
          <text class="font-medium text-gray-800">
            功能设置
          </text>
        </view>

        <view class="divide-y divide-gray-100">
          <!-- 消息通知 -->
          <view class="px-4 py-3 flex justify-between items-center">
            <view>
              <text class="block text-gray-800">
                接收通知
              </text>
              <text class="block text-xs text-gray-400 mt-1">
                及时获取新消息提醒
              </text>
            </view>
            <switch
              :checked="settings.notification"
              color="#3b82f6"
              @change="(e) => settings.notification = e.detail.value"
            />
          </view>

          <!-- 仅WiFi加载 -->
          <view class="px-4 py-3 flex justify-between items-center">
            <view>
              <text class="block text-gray-800">
                仅WiFi加载图片
              </text>
              <text class="block text-xs text-gray-400 mt-1">
                节省移动数据流量
              </text>
            </view>
            <switch
              :checked="settings.wifiOnly"
              color="#3b82f6"
              @change="(e) => settings.wifiOnly = e.detail.value"
            />
          </view>

          <!-- 多语言 -->
          <view class="px-4 py-3 flex justify-between items-center">
            <view>
              <text class="block text-gray-800">
                界面语言
              </text>
              <text class="block text-xs text-gray-400 mt-1">
                切换应用显示语言
              </text>
            </view>
            <picker
              :value="settings.language"
              :range="languageOptions"
              range-key="label"
              @change="(e) => settings.language = languageOptions[e.detail.value].value"
            >
              <view class="text-gray-600 flex items-center">
                {{ languageOptions.find(l => l.value === settings.language)?.label }}
                <uni-icons type="right" size="16" class="text-gray-400 ml-1" />
              </view>
            </picker>
          </view>
        </view>
      </view>

      <!-- 存储管理 -->
      <view class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
        <view class="px-4 py-3 border-b border-gray-100">
          <text class="font-medium text-gray-800">
            存储管理
          </text>
        </view>

        <view class="px-4 py-3 flex justify-between items-center relative">
          <view>
            <text class="block text-gray-800">
              缓存数据
            </text>
            <text class="block text-xs text-gray-400 mt-1">
              已占用 {{ settings.cacheSize }}
            </text>
          </view>
          <button
            class="text-blue-500 text-sm bg-blue-50 px-3 py-1 rounded-full absolute right-4"
            @click="clearCache"
          >
            清除缓存
          </button>
        </view>
      </view>

      <!-- 账号管理 -->
      <view class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
        <view class="px-4 py-3 border-b border-gray-100">
          <text class="font-medium text-gray-800">
            账号管理
          </text>
        </view>

        <view class="px-4 py-3 flex justify-between items-center">
          <text class="text-gray-800">
            当前账号
          </text>
          <text class="text-gray-600">
            user@example.com
          </text>
        </view>
      </view>

      <!-- 版本信息 -->
      <view class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
        <view class="px-4 py-3 flex justify-between items-center">
          <text class="text-gray-800">
            版本信息
          </text>
          <text class="text-gray-600">
            v1.2.0
          </text>
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <button
        class="w-full py-2.5 text-red-500 bg-white rounded-xl shadow-sm flex justify-center items-center mb-4"
        @click="logout"
      >
        <uni-icons type="logout" size="16" class="mr-1" />
        <text>退出登录</text>
      </button>
    </scroll-view>

    <CustomMessage ref="message" />
  </view>
</template>
